<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr">
<head>
	<title>Test Dnd plugin of dojox.grid.EnhancedGrid</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<link rel=stylesheet href="support/common.css"/>
	<style type="text/css">
		@import "/dojo/tests/dnd/dndDefault.css";
		body {
			font-size: 0.9em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
			padding: 0.5em;
		}
		.title {
			text-align:center;
			margin:1em;
		}
		.container {
			display: block;
			border: 3px solid #ccc;
			padding: 1em 3em; 
			cursor: default;
			radius: 8pt;
			background: #fff;
			-moz-border-radius: 8pt 8pt;
		}
		.myblock{
			float: left;
			margin: 10px;
			margin-top: 0;
		}
		.cfgtable th,
		.cfgtable td{
			font-weight: bolder;
			padding: 5px;
		}
		h3{
			margin: 0;
		}
 		#grid1, #grid2{
			margin-bottom: 0px;
 			width: 50em;
			height: 30em;
		}
		/*Sample - overwrite default cell style
		.claro .dojoxGridCell{
			border-color: transparent #D5CDB5 #D5CDB5 transparent !important;
		}
		.dj_ie6 .claro .dojoxGridCell{
			border: 1px solid #F1F1F1 !important;
		}*/
	</style>
	<script type="text/javascript" src="../../../../dojo/dojo.js" 
		data-dojo-config="isDebug:true, parseOnLoad: true"></script>
	<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dojox.data.AtomReadStore");
		dojo.require("dojox.data.XmlStore");
		dojo.require("dojox.grid.EnhancedGrid");
		dojo.require("dojox.grid.enhanced.plugins.Selector");
		dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
		dojo.require("dojox.grid.enhanced.plugins.DnD");
		dojo.require("dojox.grid.enhanced.plugins.GridSource");
		dojo.require("dojo.dnd.Source");
		dojo.require("dijit.form.CheckBox");
	</script>
	<script type="text/javascript" src="support/test_write_store_dnd.js"></script>
	<script type="text/javascript" src="support/test_write_store_music.js"></script>
	<script type="text/javascript">
		var layout1 = [{
			defaultCell: {width: 5},
			rows: [
				{field: "A"},
				{field: "B"},
				{field: "C"},
				{field: "D"},
				{field: "E"},
				{field: "F"},
				{field: "G", hidden: true},
				{field: "H", hidden: true},
				{field: "I", hidden: true},
				{field: "J"},
				{field: "K"},
				{field: "L"},
				{field: "M"},
				{field: "N"},
				{field: "O"},
				{field: "P"},
				{field: "Q"},
				{field: "R"},
				{field: "S"},
				{field: "T"},
				{field: "U"},
				{field: "V"},
				{field: "W"},
				{field: "X"},
				{field: "Y"},
				{field: "Z"}
			]
		}];
		var layout2 = [
		{//first view
			rows:
			[
				{ field: "Genre", width: '6'},
				{ field: "Artist", width: '5'},
				{ field: "Year", width: '6'},
				{ field: "Album", width: '12'},
				{ field: "Name", width: '17', hidden: true},
				{ field: "Length", width: '6'},
				{ field: "Track", width: '6'},
				{ field: "Composer", width: '15'},
				{ field: "Download Date", width: '10'},
				{ field: "Last Played", width: '10'}
			]
		}
		];
		var store_copy = new dojo.data.ItemFileWriteStore({
			data: test_store_data[0]
		});
		var setIdentifierForNewItem = function(item, store, index){
			console.log("setIdentifierForNewItem", index);
			var attrs = store.getIdentityAttributes(item);
			for(var i = attrs.length - 1; i >= 0; --i){
				item[attrs[i]] = index + (new Date()).getTime();
			}
			return item;
		};
		var setDnDConfig = function(gridId, type, mode, selected){
			var config = {};
			config[type] = {};
			config[type][mode] = selected;
			dijit.byId(gridId).setupDnDConfig(config);
		};
		var setCopyOnly = function(gridId, selected){
			dijit.byId(gridId).dndCopyOnly(selected);
		};
		var getRowData = function(grid, rowIndexes){
			var cells = grid.layout.cells;
			var store = grid.store;
			var cache = grid._by_idx;
			var res = "Grid Rows from " + grid.id + ":<br/>";
			for(var i = 0; i < rowIndexes.length; ++i){
				var r = rowIndexes[i];
				res += "Row " + r + ": ";
				for(var j = 0; j < cells.length; ++j){
					if(!cells[j].hidden){
						res += store.getValue(cache[r].item, cells[j].field) + ", ";
					}
				}
				res = res.substring(0, res.length - 2) + ";<br/>";
			}
			return res;
		};
		dojo.addOnLoad(function(){
			dojo.query("input.cfgbox").forEach(function(cb){
				cb.checked = true;
			});
			dojo.query("input.copyonlyCBox").forEach(function(cb){
				cb.checked = false;
			});
		});
		var newItem1 = {A: "new a1", B: "new b1", C: "new c1", D: "new d1",E: "new e1",F: "new f1",G: "new g1",H: "new h1",I: "new i1",J: "new j1",K: "new k1",L: "new l1",M: "new m1",N: "new n1",O: "new o1",P: "new c1",Q: "new q1",R: "new r1",S: "new s1",T: "new t1",U: "new u1",V: "new v1",W: "new w1",X: "new x1",Y: "new y1",Z: "new z1"};
		var newItem2 = {A: "new a2", B: "new b2", C: "new c2", D: "new d2",E: "new e2",F: "new f2",G: "new g2",H: "new h2",I: "new i2",J: "new j2",K: "new k2",L: "new l2",M: "new m2",N: "new n2",O: "new o2",P: "new c2",Q: "new q2",R: "new r2",S: "new s2",T: "new t2",U: "new u2",V: "new v2",W: "new w2",X: "new x2",Y: "new y2",Z: "new z2"};
		var newItem3 = {A: "new a3", B: "new b3", C: "new c3", D: "new d3",E: "new e3",F: "new f3",G: "new g3",H: "new h3",I: "new i3",J: "new j3",K: "new k3",L: "new l3",M: "new m3",N: "new n3",O: "new o3",P: "new c3",Q: "new q3",R: "new r3",S: "new s3",T: "new t3",U: "new u3",V: "new v3",W: "new w3",X: "new x3",Y: "new y3",Z: "new z3"};
	</script>
</head>
<body class="claro">
	<h1 class="title">dojox.grid.EnhancedGrid - DnD</h1>
	<div class="myblock">
		<h3>Grid 1</h3>
		<div id="grid1" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
			canSort="false",
			plugins='{
				dnd: {
					"setIdentifierForNewItem": setIdentifierForNewItem, copyOnly: true,
					"dndConfig": {
					}
				}
			}' store="test_store[0]" structure="layout1" rowSelector="20px">
		</div>
	</div>
	<div class="myblock">
		<h3>Grid 2</h3>
		<div id="grid2" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
			canSort="false",
			plugins='{
				dnd: {
					"setIdentifierForNewItem": setIdentifierForNewItem,
					"dndConfig": {
					}
				}
			}' store="store_copy" structure="layout1" rowSelector="20px">
		</div>
	</div>
	<div class="myblock">
		<h3>Grid 1 Configuration</h3>
		<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid1', this.checked)" />
		<table class="cfgtable" border="1">
			<thead>
				<tr>
					<th>Drag</th>
					<th>Within</th>
					<th>In</th>
					<th>Out</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Rows</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'within', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'in', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'out', this.checked)"/></td>
				</tr>
				<tr>
					<td>Columns</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'within', this.checked)"/></td>
					<td>Not implemented</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'out', this.checked)"/></td>
				</tr>
				<tr>
					<td>Cells</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'within', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'in', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'out', this.checked)"/></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="myblock">
		<h3>Grid 2 Configuration</h3>
		<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid2', this.checked)" />
		<table class="cfgtable" border="1">
			<thead>
				<tr>
					<th>Drag</th>
					<th>Within</th>
					<th>In</th>
					<th>Out</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Rows</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'within', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'in', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'out', this.checked)"/></td>
				</tr>
				<tr>
					<td>Columns</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'within', this.checked)"/></td>
					<td>Not implemented</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'out', this.checked)"/></td>
				</tr>
				<tr>
					<td>Cells</td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'within', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'in', this.checked)"/></td>
					<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'out', this.checked)"/></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="myblock" style="clear: left;">
		<h3>Ordinary Target (Can not accept grid contents)</h3>
		<div dojoType="dojo.dnd.Source" class="container">
			<div class="dojoDndItem">Item <strong>X</strong></div>
			<div class="dojoDndItem">Item <strong>Y</strong></div>
			<div class="dojoDndItem">Item <strong>Z</strong></div>
		</div>
	</div>
	<div class="myblock">
		<h3>Target that can accept Grid</h3>
		<div dojoType="dojox.grid.enhanced.plugins.GridSource" class="container" 
			insertNodesForGrid="true" getRowContent="getRowData">
			<div class="dojoDndItem">Item 1</div>
			<div class="dojoDndItem">Item 2</div>
			<div class="dojoDndItem">Item 3</div>
		</div>
	</div>
	<div class="myblock">
		<h3>Grid Acceptable Source (Drag item to grid)</h3>
		<div dojoType="dojo.dnd.Source" class="container">
			<div class="dojoDndItem" dndType="grid/rows" dndData="newItem1">Item 1</div>
			<div class="dojoDndItem" dndType="grid/rows" dndData="newItem2">Item 2</div>
			<div class="dojoDndItem" dndType="grid/rows" dndData="newItem3">Item 3</div>
		</div>
	</div>
	<p style="clear: left;"><strong>Note:</strong> To see the tundra theme, just append <b style="color:blue;">?theme=tundra</b> to the URL.</p>
</body>
</html>